<script lang="ts" setup>
import { useEventListener } from '@vueuse/core';
import type { PropType } from 'vue';

import { type Placement, useTooltipContentProps } from 'element-plus';

const props = defineProps({
  ...useTooltipContentProps,
  teleported: {
    type: Boolean,
    default: false,
  },
  placement: {
    type: String as PropType<Placement>,
    default: 'top',
  },
  overfloType: {
    type: String as PropType<'clip' | 'ellipsis' | 'unset'>,
    default: 'ellipsis',
  },
});
const textRef = shallowRef<HTMLElement>();
const disabled = ref(false);

useEventListener(textRef, 'mouseenter', () => {
  disabled.value = !(textRef.value?.scrollWidth! > textRef.value?.offsetWidth!);
});
</script>

<template>
  <div>
    <el-tooltip v-bind="props" :disabled="disabled">
      <div ref="textRef" class="overflow-text truncate" :style="{ textOverflow: overfloType }">
        {{ content }}
      </div>
    </el-tooltip>
  </div>
</template>

<style></style>
